<template>
	<view>
		<view class="page-head">
			<view class="nav">
				<view @tap="chooseRoomNum" :data-num="item.room_num" :class="choose_room_num == item.room_num ? 'navitem active' : 'navitem'" v-for="(item, index) in searchData"  >
					{{ item.name }}({{ item.count }})
				</view>
			</view>
		</view>
		
		<view class="page-foot bgf">
			<view v-if="house_info.default_broker" class="footbox">
				<view class="flex-box flex-between foot1">
					<view class="flex-box">
						<image :lazy-load="true" :src="house_info.default_broker.user.avatar" class="footavatar" mode="aspectFill"></image>
						<view>
							<view class="name">{{ house_info.default_broker.user.nickname }}</view>
							<view class="fs24 col89">
								服务
								<text class="colf8">{{ house_info.default_broker.user.service_num }}</text>
								人
							</view>
						</view>
					</view>
					<view class="flex-box">
						<button @tap="addAppointLog" data-type="2" data-subtype="0" class="btn1">留电咨询</button>
						<!-- <button @tap="jumpToChat" class="btn2">立即微聊</button> -->
				<button open-type="contact" class="btn2">立即微聊</button>
					</view>
				</view>
			</view>
			<view v-else class="footbox">
				<view class="foot2 flex-box flex-between">
					<view class="flex-box">
						<button @tap="bindPhoneCall" :data-tel="house_info.cosult_tel ? house_info.cosult_tel : house_info.platform_contact_tel" class="tc conbtn1">
							<image src="/static/icon/icon_tel2.png" class="icon_tel2"></image>
							<view class="fs24">咨询热线</view>
						</button>
						<navigator url="/pages/home/help_you/help_you"   class="tc conbtn2">
							<image src="/static/icon/icon_search-b.png" class="icon_search"></image>
							<view class="fs24">帮我找房</view>
						</navigator>
					</view>
					<view class="flex-box">
						<button @tap="addAppointLog" data-type="2" data-subtype="0" class="btn1">留电咨询</button>
						<!-- <button @tap="jumpToChat" class="btn2">立即微聊</button> -->
				<button open-type="contact" class="btn2">立即微聊</button>
					</view>
				</view>
			</view>
		</view>
		<view class="container">
			<view class="typelist">
				<template v-if="layoutList.total > 0">
					<template v-for="(item, index) in layoutList.data"  >
						<navigator :url="'/pages/house/huxing_detail/huxing_detail?id=' + item.id"   class="typeitem flex">
							<view class="imgebox">
								<u--image :showLoading="true" :src="item.images_arr[0]" width="120px" height="95px" @click="click"></u--image>
							</view>
							<view class="flex-grow-1">
								<view class="flex-box flex-between pb20">
									<view>{{ item.name }}</view>
									<view class="sale_type1">{{ item.sale_state_text }}</view>
								</view>
								<view class="fs24 col89 pb10">建面：{{ item.space }}㎡</view>
								<view class="compete">
									参考总价：
									<text>约</text>
									<text class="fs34">{{ item.total_price }}万</text>
								</view>
							</view>
						</navigator>
					</template>
					<u-loadmore v-if="layoutList.total > 9" :status="loadStatus" fontSize="24" line loading-text="努力加载中" loadmore-text="轻轻上拉"  nomore-text="没有更多了" />
				</template>
				<template v-else>
					<u-empty
					        mode="data"
							text="暂无数据"
							textSize="24"
					        icon="/static/images/none-data.png"
					>
					</u-empty>
				</template>
			</view>
		</view>
		<!-- 预约弹窗start -->
		<u-popup :show="popupStatus" mode="center" round="8" @close="closePopupStatus" closeOnClickOverlay>
			<view class="zixun-pop">
				<template v-if="appoint_type == 1 && appoint_subscribe_type == 2">
					<view class="fs40 black tc mb20">订阅楼盘开盘通知</view>
					<view class="fs30 col-darkGray tc mb40">
						<view>楼盘总是悄无声息的开盘？</view>
						<view>一键订阅，让您抢占买房先机！</view>
					</view>
				</template>
				<template v-else-if="appoint_type == 1 && appoint_subscribe_type == 1">
					<view class="fs40 black tc mb20">订阅价格变动通知</view>
					<view class="fs30 col-darkGray tc mb40">
						<view>价格变动这么快？订阅价格变动通知</view>
						<view>涨价降价我们将第一时间通知您，帮您找准买房时机！</view>
					</view>
				</template>
				<template v-else-if="appoint_type == 1 && appoint_subscribe_type == 3">
					<view class="fs40 black tc mb20">订阅实时动态通知</view>
					<view class="fs30 col-darkGray tc mb40">
						<view>价格变动这么快？订阅价格变动通知</view>
						<view>涨价降价我们将第一时间通知您，帮您找准买房时机！</view>
					</view>
				</template>
				<template v-else-if="appoint_type == 3 && appoint_subscribe_type == 0">
					<view class="fs40 black tc mb20">免费专车看房</view>
					<view class="fs30 col-darkGray tc mb40">
						<view>公交太累，打车太贵，看房团还要等位</view>
						<view>佳和房产带您免费专车看房，省时，省力，还包来回！</view>
					</view>
				</template>
				<template v-else-if="appoint_type == 2 && appoint_subscribe_type == 0">
					<view class="fs40 black tc mb20">我要咨询</view>
					<view class="fs30 col-darkGray tc mb40">
						<view>该项目有哪些优劣势？性价比如何？</view>
						<view>还有什么类似楼盘推荐……</view>
						<view>更多问题，咨询师帮你答疑解惑</view>
					</view>
				</template>
				<view class="input-box flex-box plr30 mb40" v-if="popupStatus"><input @input="appoint_mobileFun"
						:value="appoint_mobile" class="input flex-grow-1" type="number" placeholder="请输入手机号码"
						placeholder-style="color:#ccc;" /></view>
				<view @tap="submitAppointLog" class="btn1 mb30">确认</view>
				<!-- <view @tap="jumpToChat" :data-uid="broker_user_id" class="btn2 mb20">立即微聊</view> -->
				<button open-type="contact" class="btn2 mb20">立即微聊</button>
			</view>
		</u-popup>
		<!-- 预约弹窗end -->
		<!-- 预约成功弹窗start -->
		<u-popup :show="reserveStatus" mode="center" closeable :safeAreaInsetBottom="false" @close="closeReserveStatus">
			<view class="reserve">
				<image src="/static/icon/icon_reserve.png" class="icon_reserve"></image>
				<view class="title1">预约成功</view>
				<view class="title2">用手机号码{{ appoint_mobile_text }}预约了咨询服务，稍后经纪人将为您解答疑问，请注意接听电话</view>
				<button @tap="closeReserveStatus" class="reserve-btn1">好的</button>
				<!-- <button @tap="jumpToChat" :data-uid="broker_user_id" class="reserve-btn2">立即微聊</button> -->
				<button open-type="contact" class="reserve-btn2">立即微聊</button>
			</view>
		</u-popup>
		<!-- 预约成功弹窗end -->
	</view>
</template>

<script>
const app = getApp();
const functions = require('../../../utils/functions.js');
export default {
	data() {
		return {
			loadStatus:'loadmore',
			btnStatus: false,
			
			popupStatus: false,
			
			//订阅咨询预约弹窗
			reserveStatus: false,

			//预约成功弹窗
			// 预约订阅类型
			appoint_type: 1,

			//分类:1=订阅动态,2=留电咨询,3=领取免费专车,4=帮你找房,5=咨询房价走势
			// 订阅分类
			appoint_subscribe_type: 0,

			//订阅通知类型:0=无订阅,1=订阅变价通知,2=订阅开盘通知,3=订阅实时动态
			// 预约手机号
			appoint_mobile: '',

			appoint_mobile_text: '',
			broker_user_id: 0,
			house_info: null,
			house_id: 0,
			choose_room_num: 0,
			searchData: [],

			// 户型列表
			layoutList: {
				total: 0,
				current_page: 0,
				last_page: 1,
				data: []
			},

			user: {}
		};
	},
	onLoad: function (options) {
		this.house_info=app.globalData.pagesParamHouseInfo;
		this.house_id=options.house_id || 0
		this.initData();
	},
	onPullDownRefresh: function () {
		uni.showNavigationBarLoading(); //在标题栏中显示加载

		var that = this; //模拟加载

		setTimeout(function () {
			that.initData();
			uni.stopPullDownRefresh(); //停止下拉刷新
		}, 1500);
	},
	onReachBottom: function () {
		if (  this.layoutList.current_page >=   this.layoutList.last_page) {
			this.loadStatus='nomore';
			return false;
		} else {
			this.getLayoutList();
		}
	},
	methods: {
		jumpToChat(e) {
			var uid = e.currentTarget.dataset.uid || 0;
		
			if (!uid) {
				if (this.house_info.default_broker) {
					uid = this.house_info.default_broker.user_id;
				} else {
					uid = 0;
				}
			}
		
			var that = this;
			functions.checkLogin(function(ret) {
				if (ret) {
					functions.jumpToChat(uid, that.house_info.id);
				} else {
					functions.toast('请先登录');
				}
			});
		},
		chooseRoomNum(e) {
			this.choose_room_num=e.currentTarget.dataset.num;
			this.layoutList.current_page=0
			this.getLayoutList();
		},
		// 获取列表信息
		getLayoutList: function () {
			var that = this;
			var json = {
				house_id: that.house_id,
				room_num:   this.choose_room_num
			};
			json.page = Number(that.layoutList.current_page) + 1;

			if (json.page > 1 && that.layoutList.current_page >= that.layoutList.last_page) {
				functions.toast('已加载到底部了');
				this.loadStatus='nomore';
				return false;
			} 
			this.loadStatus='loading';
			functions.getAjaxList(that, '/api/xiluhouse/House/house_layout_list', json, function (res) {
				var layoutList = res.data;

				if (json.page > 1) {
					var now_layoutList_data = that.layoutList.data || [];
					var now_layoutList_data = now_layoutList_data.concat(layoutList.data);
					layoutList.data = now_layoutList_data;
				}
				if(layoutList.current_page >= layoutList.last_page){
					that.loadStatus='nomore';
				}

				that.layoutList=layoutList
			});
		},

		// 获取所有可下拉刷新更新的数据
		initData: function () {
			var that = this; // 获取---搜索数据

			functions.getAjaxData(
				'/api/xiluhouse/house/house_layout_info',
				{
					house_id: that.house_id
				},
				function (res) {
					var searchData = res.data;
					that.searchData=searchData
				}
			);
			that.layoutList.current_page=0
			that.getLayoutList();
		},
		
		addAppointLog(e) {
			var uid = e.currentTarget.dataset.uid || 0;
			
			if (!uid) {
				if (this.house_info.default_broker) {
					uid = this.house_info.default_broker.user_id;
				} else {
					uid = 0;
				}
			} 
			this.appoint_type= e.currentTarget.dataset.type;
			this.appoint_subscribe_type= e.currentTarget.dataset.subtype;
			this.broker_user_id= uid; 
			// 处理手机号码
			this.appoint_mobile= uni.getStorageSync('mobile') || this.appoint_mobile;
			this.popupStatus=true;
		},
		
		appoint_mobileFun(e) {
			this.appoint_mobile = e.detail.value
		},
		
		// 提交预约日志
		submitAppointLog() {
			var that = this;
			if (that.appoint_mobile.length != 11) {
				functions.toast('请输入正确的手机号');
				return false;
			}
			functions.checkLogin(function(ret) {
				if (ret) {
					var appoint_mobile = uni.getStorageSync('mobile');
					that.appoint_mobile = appoint_mobile;
		
					functions.submitAjaxData(
						that,
						'/api/xiluhouse/house/create_appoint_log', {
							type: that.appoint_type,
							subscribe_type: that.appoint_subscribe_type,
							mobile: that.appoint_mobile,
							broker_user_id: that.broker_user_id,
							city: that.now_city,
						},
						function(res) {
							that.appoint_mobile = that.appoint_mobile;
							that.appoint_mobile_text = appoint_mobile.substr(0, 3) + '****' +
								appoint_mobile.substr(7);
							that.reserveStatus = true;
							that.popupStatus = false;
						}
					);
				} else {
					functions.toast('请先登录');
				}
			});
		},
		
		closePopupStatus() {
			this.popupStatus = false;
		},
		closeReserveStatus() {
			this.reserveStatus = false;
		},
		
		// 拨打电话
		bindPhoneCall(e) {
			var tel = e.currentTarget.dataset.tel;
			functions.phoneCall({
				phoneNumber: tel //仅为示例，并非真实的电话号码
			});
		},
		
	}
};
</script>

<style lang="scss" scoped>
.container {
	padding-top: 120rpx;
	padding-left: 40rpx;
	padding-right: 40rpx;
}
.page-head {
	padding: 30rpx 40rpx;
	background-color: #fff;
}
.nav {
	white-space: nowrap;
	overflow-x: scroll;
}
.nav .navitem {
	margin-right: 30rpx;
	display: inline-block;
	width: 140rpx;
	height: 55rpx;
	border-radius: 5rpx;
	background: #f6f7fa;
	line-height: 55rpx;
	text-align: center;
	color: #898989;
	font-size: 26rpx;
}
.nav .navitem.active {
	background-color: #0091ff;
	color: #fff;
	box-shadow: 0 4rpx 40rpx 0 rgba(3, 103, 179, 0.3);
}

.footbox button {
	font-weight: normal;
	padding: 0;
	margin: 0;
}
.footbox {
	background-color: #fff;
}
.footavatar {
	width: 75rpx;
	height: 75rpx;
	border-radius: 50%;
	margin-right: 15rpx;
}
.footbox .name {
	font-size: 32rpx;
	line-height: 43rpx;
}
.footbox .btn1 {
	width: 190rpx;
	margin: 0;
	padding: 0;
	text-align: center;
	line-height: 74rpx;
	color: #fff;
	font-size: 30rpx;
	font-weight: normal;
	height: 74rpx;
	border-radius: 10rpx;
	background: var(--blue);
	box-shadow: 0rpx 4rpx 40rpx rgba(3, 103, 179, 0.3);
}
.footbox .btn2 {
	width: 190rpx;
	margin: 0;
	padding: 0;
	text-align: center;
	line-height: 74rpx;
	color: #fff;
	font-size: 30rpx;
	font-weight: normal;
	height: 74rpx;
	border-radius: 10rpx;
	background: #ff7b40;
	margin-left: 15rpx;
	box-shadow: 0px 4rpx 40rpx rgba(248, 103, 56, 0.3);
}

.footbox .icon_search {
	width: 32rpx;
	height: 32rpx;
	margin-bottom: 6rpx;
}
.footbox .icon_tel2 {
	width: 36rpx;
	height: 36rpx;
	margin-bottom: 9rpx;
}

.footbox .conbtn1 {
	width: 150rpx;
	border-right: 1px solid #f4f3f3;
	font-size: 24rpx;
	color: #333;
}
.footbox .conbtn2 {
	width: 150rpx;
	font-size: 24rpx;
	color: #333;
}

.footbox .foot2 {
	height: 100rpx;
	background-color: #fff;
	padding-right: 40rpx;
}
.footbox .foot1 {
	height: 100rpx;
	background-color: #fff;
}

.typelist .typeitem {
	padding-bottom: 30rpx;
}

.typelist .imgebox {
	width: 240rpx;
	height: 190rpx;
	border-radius: 10rpx;
	border: solid 1px #f4f3f3;
	margin-right: 20rpx;
	overflow: hidden;
}

.typelist .imgebox image {
	width: 240rpx;
	height: 190rpx;
}

.typelist .compete {
	font-size: var(--fs24);
	color: #898989;
}

.typelist .compete text {
	color: #f8532f;
}
</style>
